<template>
	<view class="add-address-modal" v-if="visible">
		<view class="modal-mask" @click="closeModal"></view>
		<view class="modal-content">
			<view class="modal-header">
				<text class="modal-title">{{ isEdit ? '修改地址' : '添加地址' }}</text>
				<view class="close-btn" @click="closeModal">
					<text class="close-icon">×</text>
				</view>
			</view>
			
			<view class="modal-body">
				<view class="form-item">
					<text class="label">收货人</text>
					<input 
						class="input" 
						placeholder="收货人姓名" 
						v-model="formData.realName"
						maxlength="20"
					/>
				</view>
				
				<view class="form-item">
					<text class="label">手机号</text>
					<input 
						class="input" 
						placeholder="收货人手机号" 
						v-model="formData.phone"
						type="number"
						maxlength="11"
					/>
				</view>
				
				<view class="form-item">
					<text class="label">地区</text>
					<picker mode="region" :value="formData.regionArr" @change="onRegionChange">
						<view class="region-select">
							<text class="region-text" :class="{ 'placeholder': !formData.regionArr || formData.regionArr.length === 0 }">
								{{ formData.regionArr && formData.regionArr.length > 0 ? formData.regionArr.join('') : '点击选择' }}
							</text>
							<text class="arrow">›</text>
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="label">详细地址</text>
					<input 
						class="input" 
						placeholder="如街道、门牌号、小区、乡镇" 
						v-model="formData.detail"
						maxlength="100"
					/>
				</view>
			</view>
			
			<view class="modal-footer">
				<button class="save-btn" @click="saveAddress">{{ isEdit ? '修改' : '保存' }}</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'AddAddressModal',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		editData: {
			type: Object,
			default: null
		}
	},
	data() {
		return {
			formData: {
				realName: '',
				phone: '',
				regionArr: [],
				detail: '',
                province: '',
                city: '',
                district: ''
			}
		}
	},
	computed: {
		isEdit() {
			return !!this.editData
		}
	},
	watch: {
		visible(newVal) {
			if (newVal && this.editData) {
				this.initEditData()
			}
		}
	},
	methods: {
		closeModal() {
			this.$emit('close')
			this.resetForm()
		},
		
		resetForm() {
			this.formData = {
				realName: '',
				phone: '',
				regionArr: [],
				detail: '',
                province: '',
                city: '',
                district: ''
			}
		},
		
		initEditData() {
			if (this.editData) {
				// 回显编辑数据
				this.formData = {
					realName: this.editData.realName || '',
					phone: this.editData.phone || '',
					regionArr: [this.editData.province, this.editData.city, this.editData.district].filter(Boolean),
					detail: this.editData.detail || '',
					province: this.editData.province || '',
					city: this.editData.city || '',
					district: this.editData.district || ''
				}
				
				// 如果地区数组有数据，设置region字段
				if (this.formData.regionArr.length > 0) {
					this.formData.region = this.formData.regionArr.join('')
				}
			}
		},
		
		onRegionChange(e) {
			this.formData.regionArr = e.detail.value
            this.formData.province = e.detail.value[0]
			this.formData.city = e.detail.value[1]
			this.formData.district = e.detail.value[2]
			this.formData.region = e.detail.value.join('')
		},
		
		validateForm() {
			if (!this.formData.realName.trim()) {
				uni.showToast({
					title: '请输入收货人姓名',
					icon: 'none'
				})
				return false
			}
			
			if (!this.formData.phone.trim()) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return false
			}
			
			if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return false
			}
			
			if (!this.formData.regionArr || this.formData.regionArr.length === 0) {
				uni.showToast({
					title: '请选择地区',
					icon: 'none'
				})
				return false
			}
			
			if (!this.formData.detail.trim()) {
				uni.showToast({
					title: '请输入详细地址',
					icon: 'none'
				})
				return false
			}
			
			return true
		},
		
		saveAddress() {
			if (!this.validateForm()) {
				return
			}
			
			// 构建完整地址
			const fullAddress = this.formData.detail
			
			// 创建地址对象
			const addressData = {
				realName: this.formData.realName,
				phone: this.formData.phone,
				address: this.formData.region,
                province: this.formData.province,
                city: this.formData.city,
                district: this.formData.district,
				detail: fullAddress,
				// isDefault: '0'
			}
			
			// 如果是编辑模式，添加ID
			if (this.isEdit) {
				addressData.id = this.editData.id
			}
			
			// 发送给父组件
			this.$emit('save', addressData)
			
			// 关闭模态框并重置表单
			this.closeModal()
			
			uni.showToast({
				title: this.isEdit ? '修改成功' : '添加成功',
				icon: 'success'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.add-address-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		background: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		/* 确保在移动端正确显示 */
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		will-change: opacity;
	}
	
	.modal-content {
		position: relative;
		width: calc(100% - 40px);
		max-width: 500px;
		background-color: #fff;
		border-radius: 20px;
		overflow: hidden;
		max-height: 80vh;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		z-index: 1;
	}
	
	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 20px 15px;
		border-bottom: 1px solid #f0f0f0;
		position: relative;
		
		.modal-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		
		.close-btn {
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
			
			.close-icon {
				font-size: 20px;
				color: #999;
				line-height: 1;
			}
		}
	}
	
	.modal-body {
		padding: 20px;
		
		.form-item {
			display: flex;
			align-items: center;
			padding: 13px 16px;
			background: #FBFBFD;
			border-radius: 10px;
			margin-bottom: 10px;
			
			.label {
				width: 90px;
				font-size: 14px;
				color: #333;
				font-weight: 500;
				flex-shrink: 0;
			}
			
			.input {
				flex: 1;
				font-size: 14px;
				text-align: right;
				border: none;
				outline: none;
				background: transparent;
				padding: 0;
				
				&:focus {
					color: #333;
				}
				
				&::placeholder {
					color: #999;
				}
			}
			
			.region-select {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 14px;
				min-height: 20px;
				background: transparent;
				padding: 0;
				
				.region-text {
					color: #333;
					
					&.placeholder {
						color: #999;
					}
				}
				
				.arrow {
					color: #999;
					margin-left: 10px;
					font-size: 14px;
				}
			}
		}
	}
	
	.modal-footer {
		padding: 0 20px 20px;
		
		.save-btn {
			width: 100%;
			height: 44px;
			background-color: #4cd080;
			color: #fff;
			border: none;
			border-radius: 22px;
			font-size: 16px;
			font-weight: 500;
			transition: all 0.3s ease;
			
			&:active {
				background-color: #3bb870;
				transform: scale(0.98);
			}
		}
	}
}
</style>
